{extend name="layout" /}
{block name='css'}
{__block__}
<style>
    .direct-chat-messages{
        height: auto !important;
    }
</style>
{/block}
{block name='content'}

<div class="row">
    <div class="col-3">
        <div class="card">
            <div class="card-header ui-sortable-handle" style="cursor: move;padding-left: 1.25rem;padding-right: 1.25rem">
                <div class="card-tools" style="width: 100%;margin-right: 0">
                    <ul class="nav nav-pills ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#revenue-chart" data-toggle="tab">当前对话</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#sales-chart" data-toggle="tab">排队列表</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /.card-header -->
            <div class="card-body">
                <div class="tab-content">
                    <div id="revenue-chart" class="tab-pane direct-chat-messages">
                        <div class="direct-chat-msg">
                            <div class="direct-chat-infos clearfix">
                                <span class="direct-chat-name float-left">Alexander Pierce</span>
                                <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                            </div>
                            <img class="direct-chat-img" src="/public/admin/AdminLTE302/dist/img/user1-128x128.jpg" alt="message user image">
                            <div class="direct-chat-text">
                                Is this template really for free? That's unbelievable!
                            </div>
                        </div>

                        <div class="direct-chat-msg">
                            <div class="direct-chat-infos clearfix">
                                <span class="direct-chat-name float-left">Alexander Pierce</span>
                                <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
                            </div>
                            <img class="direct-chat-img" src="/public/admin/AdminLTE302/dist/img/user1-128x128.jpg" alt="message user image">
                            <div class="direct-chat-text">
                                Working with AdminLTE on a great new app! Wanna join?
                            </div>
                        </div>
                    </div>
                    <div id="sales-chart" class="tab-pane active">
                            dfsfdsf
                    </div>
                </div>
            </div><!-- /.card-body -->
        </div>
    </div>
    <div class="col-6">
        <div class="card direct-chat direct-chat-primary">
            <div class="card-header ui-sortable-handle" style="cursor: move;">
                <h3 class="card-title">Direct Chat</h3>
                <!--<div class="card-tools"></div>-->
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                    <!-- Message. Default to the left -->
                    <div class="direct-chat-msg">
                        <div class="direct-chat-infos clearfix">
                            <span class="direct-chat-name float-left">Alexander Pierce</span>
                            <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="__AdminLTE302__/dist/img/user1-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                            Is this template really for free? That's unbelievable!
                        </div>
                    </div>
                    <div class="direct-chat-msg right">
                        <div class="direct-chat-infos clearfix">
                            <span class="direct-chat-name float-right">Sarah Bullock</span>
                            <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="__AdminLTE302__/dist/img/user3-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                            You better believe it!
                        </div>
                        <!-- /.direct-chat-text -->
                    </div>
                    <div class="direct-chat-msg">
                        <div class="direct-chat-infos clearfix">
                            <span class="direct-chat-name float-left">Alexander Pierce</span>
                            <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="__AdminLTE302__/dist/img/user1-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                            Working with AdminLTE on a great new app! Wanna join?
                        </div>
                        <!-- /.direct-chat-text -->
                    </div>
                    <div class="direct-chat-msg right">
                        <div class="direct-chat-infos clearfix">
                            <span class="direct-chat-name float-right">Sarah Bullock</span>
                            <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
                        </div>
                        <!-- /.direct-chat-infos -->
                        <img class="direct-chat-img" src="__AdminLTE302__/dist/img/user3-128x128.jpg" alt="message user image">
                        <!-- /.direct-chat-img -->
                        <div class="direct-chat-text">
                            I would love to.
                        </div>
                        <!-- /.direct-chat-text -->
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
                <form action="#" method="post">
                    <div class="input-group">
                        <input type="text" name="message" placeholder="Type Message ..." class="form-control">
                        <span class="input-group-append">
                      <button type="button" class="btn btn-primary">Send</button>
                    </span>
                    </div>
                </form>
            </div>
            <!-- /.card-footer-->
        </div>
        <!-- /.card -->
    </div>
    <div class="col-3">
        <div class="card">
            <div class="card-header ui-sortable-handle" style="cursor: move;padding-left: 1.25rem;padding-right: 1.25rem">
                <div class="card-tools" style="width: 100%;margin-right: 0">
                    <ul class="nav nav-pills ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#tab1" data-toggle="tab">个人资料</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#tab2" data-toggle="tab">其它</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /.card-header -->
            <div class="card-body">
                <div class="tab-content">
                    <div id="tab1" class="tab-pane direct-chat-messages">
                    </div>
                    <div id="tab2" class="tab-pane active">
                        dfsfdsf
                    </div>
                </div>
            </div><!-- /.card-body -->
        </div>
    </div>
</div>
{/block}

{block name='pagejs'}
<script>
    $(function () {
        // 添加
        $('#ch_add').on('click', function ( event ) {
            $.post("{:url('admin/service/add')}", {}, function( response ){
                layer.open({
                    type: 1,
                    title: '新增',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['50%', 'auto'],
                    content: response,
                    success: function (layero, index) {
                        pageJs(layero, index);
                    }
                });
            });
        });

        // 修改
        $(".oper_edit").on('click', function ( event ) {
            var id = $(this).parent('.btn-group').data('id'),
                tr = $(this).parents('tr');

            $.post("{:url('admin/service/edit')}", { 'id': id }, function( response ){
                if ( response.hasOwnProperty('error_code') ) {
                    var code = parseInt( response.error_code );
                    switch (code) {
                        case 1:
                            popupBox( getMsgBox( {'success':response.msg}, 'success' ) );
                            break;
                        case 10000:
                            popupBox( getMsgBox( response.msg, 'danger' ) );
                            break;
                        default:
                            popupBox( getMsgBox( '操作出现问题了', 'danger' ) );
                    }
                } else {
                    layer.open({
                        type: 1,
                        title: '修改',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['50%', 'auto'],
                        content: response,
                        success: function (layero, index) {
                            pageJs(layero, index, id, tr);
                        }
                    });
                }
            });

        });

        // 删除
        $(".oper_del").on('click', function ( event ) {
            var id = $(this).parent('.btn-group').data('id');
            layer.confirm('确定要执行操作吗？', function(index){

                $.post("{:url('admin/service/del')}", { 'id': id}, function( response ){
                    var code = parseInt( response.error_code );
                    switch (code) {
                        case 1:
                            popupBox( getMsgBox( {'success':response.msg}, 'success' ), function (alert_layero, alert_index) {
                                setTimeout(function () {
                                    layer.close( alert_index )
                                }, 600);
                            } );
                            layer.close(index);
                            location.reload();
                            break;
                        case 10000:
                            popupBox( getMsgBox( response.msg, 'danger' ) );
                            break;
                        default:
                            popupBox( getMsgBox( '操作出现问题了', 'danger' ) );
                    }

                });

            });
        });
    })
</script>
{/block}